<template>
  <div class="outer">
    <h1>state的基础使用{{ this.$store.state.count }}</h1>
    <h1>state用计算属性调用{{ count1 }}</h1>
    <h1>state用mapState数组方式调用{{ count }}</h1>
    <h1>state用mapState对象方式调用{{ count2 }}</h1>
    <button @click="$store.commit('increment')">
      mutation直接使用点击累加
    </button>
    <button @click="increment1">点击累加</button>
    <button @click="decrement1">点击累减</button>
    <button @click="incrementN1({ n: 3 })">点击累加n</button>
    <button @click="increment">通过mapMutation数组的方式点击累加</button>
    <button @click="decrement">通过mapMutation数组的方式点击累减</button>
    <button @click="incrementN({ n: 5 })">
      通过mapMutation对象的方式点击累加n
    </button>
    <button @click="increment2">通过mapMutation对象的方式点击累加</button>
    <button @click="decrement2">通过mapMutation对象的方式点击累减</button>
    <button @click="incrementN2({ n: 5 })">
      通过mapMutation数组的方式点击累加n
    </button>
    <button @click="incrementWait">actions等两秒再加</button>
    <button @click="incrementNWait({n:4})">actions等两秒再加n</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "Footer",

  computed: {
    count1() {
      return this.$store.state.count;
    },
    //使用mapState获取store中的值,并提供计算属性,直接展开放在computed
    ...mapState(["count"]),
    ...mapState({ count2: "count" }),
  },
  methods: {
    increment1() {
      this.$store.commit("increment");
    },
    decrement1() {
      this.$store.commit("decrement");
    },
    incrementN1(n) {
      this.$store.commit("incrementN", n);
    },
    //通过mapMutation映射的计算属性可以接受参数,希望接受的参数是对象
    ...mapMutations(["increment", "decrement", "incrementN"]),
    ...mapMutations({
      increment2: "increment",
      decrement2: "decrement",
      incrementN2: "incrementN",
    }),
    incrementWait(){
      this.$store.dispatch('incrementWait')
    },
    incrementNWait(n){
      this.$store.dispatch('incrementNWait',n)
    }
  },
};
</script>

<style scoped>
.outer {
  background: pink;
}
</style>